<template>
  <view class="custom-uni-view">
    <view class="order-top" :style="{backgroundImage: 'url(' + topImg + ')'}">
      <view class="hot-goods-list" v-if="shop">
        <view class="img"><image :src="shop.imageUrl"></image></view>
        <view class="line">
          <view class="tit text2Ellipsis">
            {{shop.title}}
          </view>
          <view class="text1">
            <view class="nub1">￥{{shop.price | current}}</view>
            <view class="nub2">限量{{shop.limitNumber}}份</view>
          </view>
        </view>
      </view>
    </view>
    <view class="order-box">
      <view class="order-box-tit">近日数据</view>
      <view class="order-box-cont1 common-card">
        
        <view class="common-tab">
          <view class="common-tab-text" :class="{active: dateType == 'week'}" @click="changeDate('week')">本周</view>
          <view class="common-tab-text" :class="{active: dateType == 'today'}" @click="changeDate('today')">今日</view>
          <view class="common-tab-text" :class="{active: dateType == 'month'}" @click="changeDate('month')">本月</view>
        </view>
        
        <view class="cont1-box">
          <view class="cont1-box-line" v-if="dateData">
            <view class="nub1"><text>￥</text>{{dateData[dateType].saleMoney}}</view>
            <view class="nub2">爆品售出</view>
            <view class="nub3">共{{dateData[dateType].saleNum}}单</view>
          </view>
          <view class="cont1-box-line">
            <view class="nub1"><text>￥</text>{{dateData[dateType].verifyMoney}}</view>
            <view class="nub2">爆品核销</view>
            <view class="nub3">共{{dateData[dateType].verifyNum}}单</view>
          </view>
        </view>
       
      </view>
    
      <view class="order-box-tit">活动数据</view>
      <view class="order-box-cont2">
        <view class="order-box-cont2-tit">
          <view>总销售&nbsp;&nbsp;{{orderData.hotSaleAllNum}}单</view>
          <view class="refs"></view>
          <view>总销售额&nbsp;&nbsp;￥{{orderData.hotSaleAllMoney | current}}</view>
        </view>
        <view class="order-box-cont2-body">
          <canvas canvas-id="orderCanvas" id="canvasArcbar" class="arcbar" :style="{width: width,height: height}"></canvas>
          <view class="info">
            <view class="info-text">
              <view class="text1">已核销（{{orderData.hotHaveVerifyNum}}）</view>
              <view class="text2 left">￥{{orderData.hotHaveVerifyMoney | current}}</view>
              <!-- <view class="text2 left">￥00.00</view> -->
            </view>
            <view class="info-text">
              <view class="text1">未核销（{{orderData.hotNoVerifyNum}}）</view>
              <!-- <view class="text2 right">￥12.00</view> -->
              <view class="text2 right">￥{{orderData.hotNoVerifyMoney | current}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { hotSaleSta } from '../../service/hot/hot.service.js'
export default {
  data () {
    return {
      orderData: {},
      shop: {},
      dateData: {
        today: {},
        week: {},
        month: {}
      },
      height: '210rpx',
      width: '420rpx',
      dateType: 'today', // 日期的type
      circleLoading: null,
      process: 0,
      topImg: this.$store.state.imgBaseUrl + '/bp-bg.png'
    }
  },
  created() {
    this.getOrder()
  },
  onLoad: function (option) {
    this.shop = JSON.parse(decodeURIComponent(option.shop));
  },
  methods: {
    changeDate(type) {
      this.dateType = type;
    },
    getOrder () {
      let params = {
        id: this.shop.id
      }
      hotSaleSta(params, (res) => {
        if (res.status == 0) {
          this.orderData = res.data;
          this.dateData.today['saleMoney'] = res.data.dayHotSaleMoney;
          this.dateData.today['saleNum'] = res.data.dayHotSaleNum;
          this.dateData.today['verifyNum'] = res.data.dayHotVerifyNum;
          this.dateData.today['verifyMoney'] = res.data.dayHotVerifyMoney;
          this.dateData.week['saleMoney'] = res.data.weekHotSalMoney;
          this.dateData.week['saleNum'] = res.data.weekHotSaleNum;
          this.dateData.week['verifyNum'] = res.data.weekHotVerifyNum;
          this.dateData.week['verifyMoney'] = res.data.weekHotVerifyMoney;
          this.dateData.month['saleMoney'] = res.data.monthHotSaleMoney;
          this.dateData.month['saleNum'] = res.data.monthHotSaleNum;
          this.dateData.month['verifyNum'] = res.data.monthHotVerifyNum;
          this.dateData.month['verifyMoney'] = res.data.monthHotVerifyMoney;
          // let nub = (100 * parseFloat(res.data.hotHaveVerifyNum))/(parseFloat(res.data.hotHaveVerifyNum) + parseFloat(res.data.hotNoVerifyNum)); // 计算已核销的百分比
          let nub = (100* parseFloat(res.data.hotHaveVerifyNum))/ (parseFloat(res.data.hotNoVerifyNum)+ parseFloat(res.data.hotHaveVerifyNum)) ;
          // 渲染图标
          this.toCanvas('orderCanvas', nub, 56, 50, 10, "#434343", "#E1E1E1", "red");
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    },
    toCanvas(id, progress,radius,lineWidth,fontSize,color,bgcolor1,bgcolor2) {
      // id  当前canvas 的id
      // process  当前要显示的进度
      // radius   画的圆的半径
      // lineWidth 画的圆的线宽
      // fontSize 画的字体大小
      // color  字体颜色
      // bgcolor1  圆的环颜色
      // bgcolor2  圆的环颜色
      // 'orderCanvas', 8,50,50,10,"yellow","pink","red"
      let that = this
      //canvas进度条
      var ctx = uni.createCanvasContext(id),
          //最终百分比
          circleX = 100, // 中心x坐标
          circleY = 100, //中心y坐标
          canvaWidth = uni.upx2px(622), //设置canvas的宽高 uni.upx2px尺寸单位转换
          canvaHight = uni.upx2px(984);

      //画圆
      function circle(cx, cy, r) {
        ctx.beginPath();
        ctx.setLineWidth(lineWidth);
        ctx.setStrokeStyle(bgcolor1);
        ctx.arc(cx, cy, r, Math.PI, Math.PI * 2);
        ctx.stroke();
      }

      //画弧线
      function sector(cx, cy, r, process) {
        ctx.beginPath();
        ctx.setLineWidth(lineWidth);
        // 渐变色 - 可自定义
        let linGrad = ctx.createLinearGradient(
          circleX - radius - lineWidth, circleY, circleX + radius + lineWidth, circleY
        );
        linGrad.addColorStop(0.0, '#434343');
        linGrad.addColorStop(1.0, '#434343');
        ctx.setStrokeStyle(linGrad);
        // ctx.setStrokeStyle(bgcolor2) ;
        ctx.arc(cx, cy, r, Math.PI, Math.PI * (1 + process / 100));
        ctx.stroke();
        ctx.draw()
      }

      //刷新
      function loading() {
        if (that.process >= progress) clearInterval(that.circleLoading);
        //清除canvas内容
        ctx.clearRect(0, 0, circleX * 2, circleY * 2);
        //圆形
        circle(circleX, circleY, radius);
        //圆弧
        sector(circleX, circleY, radius, that.process);
        //控制结束时动画的速度
        if (that.process < progress) {
          if (that.process / progress > 0.90) {
            that.process += 0.30;
          } else if (process / progress > 0.80) {
            that.process += 0.55;
          } else if (that.process / progress > 0.70) {
            that.process += 0.75;
          } else {
            that.process += 1.0;
          }
        }
    
      }
      that.circleLoading = setInterval(function () {
        loading();
      }, 20);
    }
  }
}
</script>
<style scoped lang="scss">
  // .custom-uni-view {
  //   height: 100vh;
  //   background-color: #FFFFFF;
  // }
  image {
    width: 100%;
    height: 100%;
  }
  .order-top {
    height: 202rpx;
    padding: 30rpx 30rpx 0; 
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .order-box {
    padding: 0 30rpx;
    &-tit {
      font-size: 36rpx;
      color: #333333;
      line-height: 34rpx;
      margin: 40rpx 0 30rpx;
    }
    &-cont1 {
      height: 280rpx;
      border-radius:12rpx;
      background-color: #FFFFFF;
      padding: 42rpx 25rpx 0;
      .common-tab {
        width: 300rpx;
        float: right;
      }
      .cont1-box{
        clear: both;
        padding-top: 52rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        &-line:first-of-type {
           margin-right: 121rpx;
        }
        &-line {
          text-align: center;
          .nub1 {
            color: #C2AC78;
            font-size: 42rpx;
            text {
              font-size: 26rpx;
            }
          }
          .nub2 {
            font-size: 30rpx;
            color: #333333;
            margin: 21rpx 0 24rpx;
          }
          .nub3 {
            color: #999999;
            font-size: 22rpx;
          }
        }
      }
    }
    &-cont2 {
      height:450rpx;
      background:rgba(255,255,255,1);
      box-shadow:0px 0px 27rpx 0px rgba(237,237,237,1);
      border-radius:12rpx;
      padding-bottom: 22rpx;
      &-tit {
        padding: 33rpx 0;
        border-bottom: 1rpx solid #E1E1E1;
        font-size: 30rpx;
        color: #333333;
        font-weight: 500;
        display: flex;
        justify-content: center;
        align-items: center;
        .refs {
          width: 1px;
          height: 59rpx;
          background: #E1E1E1;
          margin: 0 37rpx 0 80rpx;
        }
      }
      &-body {
        width: 450rpx;
        margin: 0 auto;
        .arcbar {
          width: 420rpx;
          height: 210rpx;
          canvas {
            width: 420rpx;
            height: 210rpx;
          }
        }
        .info {
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin-top: 12rpx;
          .text1 {
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color:#333333;
          }
          .text2 {
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #C2AC78;
            margin-top: 30rpx;
            position: relative;
            &::before {
              // content: '';
              font-size: 22rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #666666;
              position: absolute;
              right: -40rpx;
              top: -24rpx;
            }
            &.left::before {
              content: '已结算';
            }
            &.right::before {
              content: '未结算';
            }
          }
        }
      }
    }
  }
  
</style>